import React from "react";
import {
    Animated,
    Dimensions,
    Easing,
    Image,
    PixelRatio,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
} from "react-native";
import BoxShadow from '../../widgets/ShadowBoxView'
import { getffly } from "../../utils/common";
import Images from "../../images/Images";
import screen from "../../utils/screen";

const { width, height } = Dimensions.get('window');

const imags = [
    Images.dialog_right,
    Images.dialog_no,
    Images.dialog_war,
    Images.dialog_loading
];

const Pixel_32 = screen.scaleSize(32);
const Pixel_36 = screen.scaleSize(36);
const Pixel_28 = screen.scaleSize(28);
const Pixel_340 = screen.scaleSize(340);
const Pixel_42 = screen.scaleSize(42);
const Pixel_48 = screen.scaleSize(48);
const Pixel_480 = screen.scaleSize(480);

class DialogTip extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            animationType: 'none',
            modalVisible: false,
            transparent: true,
            showtype: 0,
            showtype1: 0,
            conten: '',
            maxwidth:null,
            maxheight:null
        };
        this.spinValue = new Animated.Value(0);
        this._timer = null;
    }
    componentDidMount = () => {
        this.spin();
        console.log("home_aa3");
    }
    componentWillMount = () => {
        // this.countTime();
    }
    componentWillUnmount = () => {

    }

    countTime = () => {
        this._timer = setTimeout(() => {
            this.setState({ modalVisible: false });
            this.stopTime();
        }, 1500);
    }

    stopTime = () => {
        this._timer && clearTimeout(this._timer);
    }

    showLoading = (title)=>{
        this.showDialog(3, "Loading...", 3);
    }

    showSuccess = (title)=>{
        this.showDialog(3,title,0)
    }

    showError(msg){
        this.showDialog(3,msg,1);
    }

    showTip(msg){
        this.showDialog(2, msg);
    }



    hideDialog = () => {
        this.stopTime();
        this.setState({ modalVisible: false });
    }

    showDialog = (type, conten, type1) => {
        if (type > 0 && type <= 3) {
            this.stopTime();
            if (type == 2) {
                console.log("showDialog type 2");
                this.setState({ modalVisible: true,maxheight:null, showtype: type, conten: conten });
            } else if (type == 3) {
                console.log("showDialog type 3");
                this.setState({ modalVisible: true,maxheight:null, showtype: type, conten: conten, showtype1: type1 });

            }
            if (type == 3 && type1 == 3) {

            } else {
                this.countTime();
            }

        }
    }
    spin = () => {
        // Alert.alert("1111");
        this.spinValue.setValue(0)
        Animated.timing(this.spinValue, {
            toValue: 1, //
            duration: 1000,
            useNativeDriver: false,
            easing: Easing.linear
        }).start(() => this.spin())
    }
    render() {
        const spin = this.spinValue.interpolate({
            inputRange: [0, 1],
            outputRange: ['0deg', '360deg']
        })
        return (
            <View style={{ flex: 1, position: 'absolute', justifyContent: 'center', alignItems: 'center',zIndex:5 }} >
                {
                    this.state.modalVisible && <TouchableOpacity activeOpacity={1.0} style={{ width: width, height: height, justifyContent: 'center', alignItems: 'center' }} onPress={() => { }} >
                        {
                            this.state.showtype == 2 && <View style={styles.container}>

                                <BoxShadow shadowOption={{ color:'#000000',border:Pixel_32,radius:Pixel_32,opacity:0.15}}
                                           style={{width:Pixel_480,paddingVertical:screen.PIXEL_20}}
                                >
                                    <Text style={{width:Pixel_480,fontFamily:getffly("regular"), textAlign: 'center', fontSize: Pixel_36, color: '#1C4140', lineHeight: Pixel_48  }}>{this.state.conten}</Text>
                                </BoxShadow>

                            </View>
                        }
                        {
                            this.state.showtype == 3 && <View style={styles.container}>
                                {
                                    //不用动画
                                    this.state.showtype1 < 3 && (
                                        <BoxShadow shadowOption={{color:'#000000',border:screen.PIXEL_10,radius:Pixel_32,opacity:0.15}}
                                                   style={{width:Pixel_340,alignItems:'center',backgroundColor:'#fff'}}
                                        >
                                            <Image
                                                source={imags[this.state.showtype1]}
                                                style={{ width: screen.PIXEL_120, height: screen.PIXEL_120, marginTop: screen.PIXEL_60 }}
                                            />
                                            <Text style={{fontFamily:getffly("regular"), textAlign: 'center', fontSize: Pixel_36, color: '#1C4140', lineHeight: Pixel_48, marginTop: screen.PIXEL_20, marginBottom: Pixel_48 }}>{this.state.conten}</Text>

                                        </BoxShadow>
                                    )
                                }

                                {
                                    //loading动画
                                    this.state.showtype1 == 3 &&(
                                        <BoxShadow shadowOption={{ color:'#000000',border:screen.PIXEL_10,radius:Pixel_32,opacity:0.15}}
                                                   style={{width:screen.PIXEL_240,alignItems:'center'}}
                                        >
                                            <Animated.Image
                                                source={Images.dialog_loading}
                                                style={{ width: screen.PIXEL_140, height: screen.PIXEL_140, marginTop: Pixel_48, transform: [{ rotate: spin }] }}
                                            />
                                            <Text style={{fontFamily:getffly("regular"), textAlign: 'center', fontSize: Pixel_32, color: '#005652', lineHeight: Pixel_48, marginTop: 0, marginBottom: screen.PIXEL_20 }}>{this.state.conten}</Text>

                                        </BoxShadow>
                                    )
                                }
                            </View>
                        }
                    </TouchableOpacity>
                }
            </View>
        );
    }


    _setModalVisible = (visible) => {
        this.setState({ modalVisible: visible });
    }

    startShow = () => {

    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    innerContainer: {
        borderRadius: 10,
        alignItems: 'center',
    },
    row: {
        alignItems: 'center',

        flex: 1,
        flexDirection: 'row',
        marginBottom: 20,
    },
    rowTitle: {
        flex: 1,
        fontWeight: 'bold',
    },
    button: {
        borderRadius: 5,
        flex: 1,
        height: 44,
        alignSelf: 'stretch',
        justifyContent: 'center',
        overflow: 'hidden',
    },
    buttonText: {
        fontSize: 18,
        margin: 5,
        textAlign: 'center',
    },


    flex: {
        flex: 1,
    },
    at: {
        borderWidth: 1 / PixelRatio.get(),
        width: 80,
        marginLeft: 10,
        marginRight: 10,
        borderColor: '#18B7FF',
        height: 1,
        marginTop: 10

    },
    date: {
        textAlign: 'center',
        marginBottom: 5
    },
    station: {
        fontSize: 20
    },
    mp10: {
        marginTop: 5,
    },
    btn: {
        width: 60,
        height: 30,
        borderRadius: 3,
        backgroundColor: '#FFBA27',
        padding: 5,
    },
    btn_text: {
        lineHeight: 18,
        textAlign: 'center',
        color: '#fff',
    },
});

DialogTip.navigationOptions = {
    title: null,
    headerLeft: () => null,
    headerShown: false,
};

export default DialogTip;
